import React, { Component } from 'react';
import { Row, Col } from 'antd';
import Axios from '../../axios'
import CommonUtil from './../../utils/common';

import './index.less';


class Header extends Component {

  state = {};

  componentWillMount() {
    this.setState({
      userName: 'Diviner_Sun',
    });
    setInterval(() => {
      let sysTime = CommonUtil.formatDate(new Date());
      this.setState({
        sysTime
      });
    }, 1000);
    this.getWeatherInfo();
  }

  getWeatherInfo() {
    let city = '北京';
    const ak = '70DfE3yIm5MpLQGG8ANLp7Aohnc2fUZ7';
    let url = 'http://api.map.baidu.com/telematics/v3/weather?location='+ encodeURIComponent(city) +'&output=json&ak='+ ak;
    Axios.jsonp({
      url: url
    }).then((response) => {
      if(response.status === 'success') {
        let data = response.results[0].weather_data[0];
        // console.log(data);
        this.setState({
          week: data.date.slice(0, 3),
          weather: data.weather,
          wind: data.wind,
          wendu: data.temperature,
          weatherImg: data.dayPictureUrl
        });
      }
    }).catch(function (error) {
      console.log(error);
    });
  }

  render() {
    return (
      <div className={'header'}>
        <Row className={'header-top'}>
          <Col span={24}>
            <span>欢迎， {this.state.userName}!</span>
            <a href={'/111'}>退 出</a>
          </Col>
        </Row>
        <Row className={'top-info'}>
          <Col span={4} className={'title'}>
            <span>首页</span>
          </Col>
          <Col span={20} className={'weather'}>
            <span className={'weather-date'}>{this.state.sysTime}</span>
            <span className={'weather-detail'}>
              <span className={'weather-week'}>{this.state.week}</span>
              <img src={this.state.weatherImg} alt={'天气图片'} />
              <span className={'weather-weather'}>{this.state.weather}</span>
              <span className={'weather-wind'}>{this.state.wind}</span>
              <span className={'weather-wendu'}>温度： {this.state.wendu}</span>
            </span>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Header;